<template>
	<view>
		<view>
			<view style="position:relative">
				<helang-blur :params="params"></helang-blur>
				<view class="flex flex-direction justify-center align-center"
					style="text-align: center;width: 350rpx;position: absolute;top:0rpx;left:200rpx;">
					<hx-navbar ref="hxnb" :config="config">
						<block slot="right">
							<image v-if="Id == usId||Id ==''"
								style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
								src="../../../static/cliend/7399.png" mode="aspectFit" @tap="publish">
							</image>
							<view class="flex" v-if="Id != usId && Id !=''" style="margin-right: 25rpx">
								<view class="attention" v-if="concern==0" style="margin-left:50rpx;z-index: 9999;"
									@click="getConcern">
									关注</view>
								<view @click="sheet" v-if="concern==1" class="attention"
									style="z-index: 9999;margin-left:50rpx;color: #1E1E1EFF;background-color: #ECECECFF;">
									已关注
								</view>
							</view>
						</block>
					</hx-navbar>
					<view>
						<image :src="list.image" mode="aspectFit"
							style="width: 196rpx;height: 196rpx;border-radius: 50%;">
						</image>
						<view style="color: #333333;font-size: 32rpx;margin-top: 20rpx;">
							{{list.userName}}{{list.shopsName}}{{list.name}}
						</view>
						<view style="color: #000000;font-size: 28rpx;margin-top: 20rpx;">
							{{list.signature}}
						</view>
					</view>

				</view>
			</view>
			<view style="width: 100%;background: #ffffff;">
				<view class="flex flex-wrap">
					<view class="otherfu">
						<!-- <view style="color: #000000;font-weight: 500;font-size: 36rpx;">0</view> -->
						<view style="color: #000000;font-weight: 500;font-size: 36rpx;">32</view>
						<view style="font-size: 28rpx;color:#1E1E1E;margin-top: 16rpx;etter-spacing: 29px;">获赞</view>
					</view>
					<view class="otherfu" @click="beFollowed(2)">
						<view style="color: #000000;font-weight: 500;font-size: 36rpx;">
							{{list.fans}}
						</view>
						<view style="font-size: 28rpx;color:#1E1E1E;margin-top: 16rpx;etter-spacing: 29px;">被关注</view>
					</view>
					<view class="otherfu" @click="Followed(1)">
						<view style="color: #000000;font-weight: 500;font-size: 36rpx;">
							{{list.attention}}
						</view>
						<view style="font-size: 28rpx;color:#1E1E1E;margin-top: 16rpx;etter-spacing: 29px;">关注</view>
					</view>
				</view>
			</view>
			<view class="opus" v-if="type == 1">
				<view class="flex justify-between" @click="opus()">
					<view class="flex align-center">
						<view
							style="width: 6rpx;height: 38rpx;background: #492D22;border-radius: 10rpx;margin-right: 15rpx;">
						</view>
						作品
					</view>
					<image style="width: 64rpx;height: 64rpx;" src="../../static/2068.png" mode=""></image>
				</view>
				<view style="line-height: 60rpx;" v-if="opusData == []">
					他最近很懒，啥都没有写！！
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="100" v-if="opusData != ''">
					<view class="flex">
						<view class="flex flex-direction" style="padding: 0 20rpx;" v-for="(item,index) in opusData"
							@click="opusDetails(item.id)">
							<image :src="item.image" mode="aspectFill" style="width: 274rpx;height:206rpx;border-radius: 20rpx;">
							</image>
							<view style="text-align: center;margin-top: 20rpx;">
								{{item.title}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="dynamic" v-if="dynamic != ''">
				<h3>最新动态</h3>
				<view class="dynamic_" v-for="(item,index) in dynamic" :key="index" v-if="index<2">
					<view>
						<view style="color: #000000;">{{item.content}}</view>
						<view style="color: #1E1E1E4D;">{{item.createTime}}</view>
						<view style="margin-bottom: 30rpx;color: #57BFC1FF;" v-for="(items,index) in item.topicName"
							:key="index">
							#{{items.name}}
						</view>
						<u-album :urls="item.image" keyName="src2" space="5"></u-album>
					</view>
				</view>
				<!-- 笔记 -->
				<view class="dynamic_" v-if="type == 1">
					<h4 style="margin-bottom: 30rpx;">项目笔记</h4>
					<view class="debriefingConcent flex justify-between align-center justify-center"
						style="padding:0 30rpx ;" @tap="godingdan()">
						<view class="flex align-center">
							<image src="../../../static/cliend/c1.png" mode="aspectFit"
								style="width: 94rpx;height: 94rpx;border-radius: 5rpx;"></image>
							<view style="margin-left:30rpx;width: 100%;">
								<view style="color: #1E1E1E;font-size: 32rpx;">济南尊现代简约风格...</view>
								<view style="color: rgba(30,30,30,0.3);">62m²&nbsp;&nbsp;欧式</view>
							</view>
						</view>
						<view style="color: #167EC1FF;font-size: 32rpx;font-weight: 650;">查看</view>
					</view>
				</view>
			</view>
			<!-- 动态为空 -->
			<view v-if="dynamic == ''" style="background-color: #FFFFFF;">
				<view style="margin:50rpx 0 0 30rpx ;font-size: 36rpx;font-weight:700;padding-top: 30rpx;">最新动态</view>
				<view class="flex flex-direction justify-center align-center" style="width: 754rpx;margin-top: 40rpx;">
					<image src="../../../static/me/kone.png" mode="" style="width: 390rpx;height: 390rpx;">
					</image>
					<view class="aniuert" @tap="publish">发布动态</view>
				</view>
			</view>
			<!-- 弹窗 -->
			<uni-popup id="popup" ref="sheet" type="bottom" :animation="true">
				<view style="text-align: center;padding: 30rpx;background-color: #ECECECFF;" @click="cancelConcern">
					取消关注
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import helangBlur from "@/components/helang-blur/helang-blur.vue"
	export default {
		components: {
			helangBlur
		},
		data() {
			return {
				config: {
					title: '',
					color: '#111111',
					backgroundColor: [1, ''],
					rightSlot: true,
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				// 动态
				dynamic: [],
				// 我的作品
				opusData: [],
				systemBarHeight: 0,
				phoneHeight: 0,
				params: {
					width: '300px',
					height: '562rpx',
					image: "",
					blur: "xl"
				},
				cid: [{
						num: 14,
						title: "获赞",
						id: 0
					},
					{
						num: 287,
						title: "被关注",
						id: 1
					},
					{
						num: 3,
						title: "关注",
						id: 2
					},
				],
				list: {},
				type: '',
				// 其他用户
				userType: '',
				Id: '',
				concern: '',
				usId: '',
			}
		},
		created() {
			this.getSysteminfo();
		},
		onLoad(e) {
			console.log(e, '超限超载')
			this.type = this.$cache.get('type')
			this.usId = this.$cache.get('id')
			if (e.Id == null) {
				this.list = JSON.parse(e.data)
				this.params.image = this.list.image
				console.log('ID', this.list)
			} else {
				this.id = e.Id
				this.Id = e.Id
				this.userType = e.usType
				this.otherPerson()
			}
			uni.getSystemInfo({
				success: (res) => {
					// 可使用窗口高度，将px转换rpx
					this.phoneHeight = ((res.windowHeight * (750 / res.windowWidth))) + 'rpx'
					this.params.width = ((res.windowWeight * (750 / res.windowWidth))) + 'rpx'
					console.log(this.phoneHeight)
				}
			})
			if (this.type == 1) {
				this.articleIist(1, 10)
			}
			this.dynamicList(1, 10)
		},
		methods: {
			// 动态列表
			dynamicList(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
				}
				this.$api.dynamic(data).then((res) => {
					this.dynamic = res.data.result.list
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime)
						let image = item.image.substring(0, item.image.length);
						item.image = image.split(',')
					})
					console.log('动态', res)
				})
			},
			// 被关注
			beFollowed(type) {
				if (this.usId == this.Id) {
					this.$tools.goPageNoAuth('../chat/fans?type=' + type)
				} else {
					return
				}
			},
			// 关注列表
			Followed(type) {
				if (this.usId == this.Id) {
					this.$tools.goPageNoAuth('../chat/fans?type=' + type)
				} else {
					return
				}
			},
			// 关注
			getConcern() {
				let data = {
					focusedId: this.id,
					userType: this.userType,
					operation: 1
				}
				this.$api.addConcern(data).then((res) => {
					// console.log('关注', res)
					this.otherPerson()
				})
			},
			sheet() {
				this.$refs.sheet.open()
			},
			// 取消关注
			cancelConcern() {
				let data = {
					focusedId: this.id,
					userType: this.userType,
					operation: 0
				}
				this.$api.unConcern(data).then((res) => {
					// console.log('取消关注', res)
					this.$refs.sheet.close()
					this.otherPerson()
				})
			},
			// 其他用户个人信息
			otherPerson() {
				let data = {
					id: this.id,
					type: this.userType,
				}
				this.$api.otherPerson(data).then((res) => {
					if (this.userType == 3) {
						this.list = res.data.result.installerInfo
						this.params.image = this.list.image
					} else if (this.userType == 4) {
						this.list = res.data.result.userInfo
						this.params.image = this.list.image
					} else if (this.userType == 1) {
						this.list = res.data.result.designerInfo
						this.params.image = this.list.image
					}
					this.dynamic = res.data.result.userDynamic
					console.log(res, '时代的')
					this.concern = res.data.result.follow
					// this.userType = res.data.result.type
					console.log('其他用户', res)
				})
			},
			articleIist(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
					type: 2,
				}
				this.$api.articleIist(data).then((res) => {
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime).slice(0, 11)
					})
					if (num == 1) {
						this.opusData = res.data.result.list
					} else {
						this.opusData = this.opusDate.concat(res.data.result.list)
					}
					console.log(res.data.result.list.length, res.data.result.total)
					this.mescroll.endBySize(this.opusData.length, res.data.result.total);
					console.log('作品', res)
				})
			},
			// 发布动态
			publish() {
				this.$tools.goPageNoAuth('../design/addNotes')
			},
			// 笔记详情
			godingdan() {
				this.$tools.goPageNoAuth('../design/notesDetails')
			},
			// 作品列表
			opus() {
				this.$tools.goPageNoAuth('./opus')
			},
			// 作品详情
			opusDetails(id) {
				this.$tools.goPageNoAuth('../decoration/homepageDetails?id=' + id)
			},
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
						console.log(this.systemBarHeight, '大无畏的')
					}
				});
			},
		}
	}
</script>

<style scoped>
	.attention {
		color: #FFFFFF;
		color: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 8rpx;
		background: #492D22;
	}

	.debriefingConcent {
		width: 630rpx;
		height: 152rpx;
		background: rgba(73, 45, 34, 0.05);
		border-radius: 20rpx;
	}

	.dynamic_ {
		margin-top: 30rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
	}

	.dynamic {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		padding: 30rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin: 20rpx 0;
		overflow: hidden;
	}

	.opus {
		/* height: 382rpx; */
		width: 100%;
		background: #FFFFFF;
		margin: 30rpx 0;
		padding: 30rpx;
	}

	.otherfu {
		width: calc(100% /3);
		display: flex;
		margin: 30rpx 0;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.aniuert {
		width: 530rpx;
		height: 112rpx;
		background: #492D22;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		line-height: 112rpx;
		margin: 100rpx 0;

	}
</style>
